<template>
	<view style="padding: 40rpx;">
		<view v-for="i in datalist">
			<uni-card  :title="i.orderId" :sub-title="i.userName" :extra="'金额：'+i.paySum" >
				<view v-if="i.orderState==1" >
					<view style="color: red;font-size: 40rpx;text-align: center;">已支付</view>
					<view style="color: red;font-size: 30rpx;text-align: center;">{{i.orderDate}}</view>
				</view>
				<view v-if="i.orderState == 0">
					<button type="primary" @click="pay(i.orderId)" v-if="i.paySum!=0">去支付</button>
					<button type="primary" @click="pay(i.orderId)" v-if="i.paySum==0">点击完成</button>
				</view>
			</uni-card>
		</view>
		<!-- <rich-text :nodes="detail.content(rs)"></rich-text> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token:'',
				datalist: [],
				rs : ''

			}
		},
		onLoad() {
			
		},
		onShow() {
			this.token = uni.getStorageSync("token")
			if(this.token == ''){
				uni.showToast({
					title: '请先登录',
					icon:"error"
				});
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
			let that = this
			uni.request({
				url: "http://127.0.0.1:9000/order/findAllOrder",
				method: "post",
				header: {
					Authorization: that.token
				},
				success(res) {
					
					var rs = res.data.data.order
					rs.reverse()
					for (var i = 0; i < rs.length; i++) {
						rs[i].orderId = '订单号:'+rs[i].orderId
					}
					that.datalist =rs
					console.log(res.data.data.order);
					
				}
			})
			
		},
		methods: {
			navigate1: function(uri) {
				uni.navigateTo({
					url: `/pages/${uri}`
				})
			},
			pay(id){
				console.log(id);
				var id2 = id.split(":")[1]
				console.log(id2);
				uni.request({
					url: "http://127.0.0.1:9000/order/orderPayment2?orderId="+id2,
					method: "post",
					header: {
						Authorization: this.token
					},
					success(res) {
						var that =this
						console.log(res.data.data.三方支付结果);
						uni.reLaunch({
						    url: '/pages/list/list'
						})
					}
				})
			}
		},
	}
</script>

<style lang="less">
	.ding {
		font-size: 20px;
		font-weight: bold;
		text-align: center;
	}

	.dan {
		padding: 40rpx 0;
		display: flex;
		justify-content: space-around;

		.dan1 {
			width: 50%;
			text-align: center;

		}
	}

	.imgss {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wu {
		text-align: center;
		font-size: 13px;
		color: #EBEBEB;
	}

	.btn {
		width: 220rpx;
		height: 80rpx;
		background-color: royalblue;
		color: white;

	}

	.completed {
		// width: 100%;
		background-color: #EBEBEB;
		padding: 20rpx;
		margin-bottom: 5rpx;

		.completed1 {
			display: flex;
			padding-bottom: 20rpx;

			.imag2 {
				padding-right: 20rpx;

				.imag1 {
					width: 270rpx;
					height: 270rpx;
				}
			}

			.show {
				.show1 {
					font-weight: bolder;
					font-size: 20px;
					padding-bottom: 15rpx;
				}

				.show2 {
					font-weight: 400;
					font-size: 15px;
					padding-bottom: 15rpx;
				}

				.show3 {
					font-weight: 400;
					font-size: 15px;
					padding-bottom: 15rpx;
					color: red;
				}

				.show4 {
					padding-bottom: 15rpx;
				}
			}
		}

		// .xian{
		// 	height: 5rpx;
		// 	background-color: #F5F5F5;
		// }
		.completed2 {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;

			.temp1 {
				font-weight: bolder;
			}

			.temp2 {
				color: #0C7DFF
			}

			.temp3 {
				color: orangered
			}
		}
	}
</style>
